﻿<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:LogicCircuit"
	xmlns:properties="clr-namespace:LogicCircuit.Properties"
>
	<Style TargetType="{x:Type local:ColorPicker}">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type local:ColorPicker}">
					<ControlTemplate.Resources>

						<!-- Chess board representing transparent color -->
						<DrawingBrush x:Key="TransparentBrush" TileMode="Tile" ViewportUnits="Absolute" Viewport="0,0,10,10">
							<DrawingBrush.Drawing>
								<DrawingGroup>
									<GeometryDrawing Brush="White">
										<GeometryDrawing.Geometry>
											<RectangleGeometry Rect="0,0,10,10"/>
										</GeometryDrawing.Geometry>
									</GeometryDrawing>
									<GeometryDrawing Brush="DarkGray">
										<GeometryDrawing.Geometry>
											<GeometryGroup>
												<RectangleGeometry Rect="0,0,5,5"/>
												<RectangleGeometry Rect="5,5,5,5"/>
											</GeometryGroup>
										</GeometryDrawing.Geometry>
									</GeometryDrawing>
								</DrawingGroup>
							</DrawingBrush.Drawing>
						</DrawingBrush>

						<!-- Little square showing the color -->
						<DataTemplate x:Key="ColorPresenter" DataType="{x:Type Color}">
							<Border Width="15" Height="15" BorderBrush="Black" BorderThickness="1" Margin="1" ToolTip="{Binding StringFormat=({0})}">
								<Border.Style>
									<Style TargetType="Border">
										<Setter Property="Background">
											<Setter.Value>
												<SolidColorBrush Color="{Binding}"/>
											</Setter.Value>
										</Setter>
										<Style.Triggers>
											<DataTrigger Binding="{Binding}" Value="{x:Static Colors.Transparent}">
												<Setter Property="Border.Background" Value="{StaticResource TransparentBrush}"/>
											</DataTrigger>
										</Style.Triggers>
									</Style>
								</Border.Style>
							</Border>
						</DataTemplate>

						<!-- List box showing list of colors in a grid -->
						<Style x:Key="ColorList" TargetType="ListBox">
							<Setter Property="Background" Value="Transparent"/>
							<Setter Property="BorderThickness" Value="0"/>
							<Setter Property="SelectionMode" Value="Single"/>
							<Setter Property="SelectedItem" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedValue, Mode=TwoWay}"/>
							<Setter Property="ItemTemplate" Value="{StaticResource ColorPresenter}"/>
							<Setter Property="ItemsPanel">
								<Setter.Value>
									<ItemsPanelTemplate>
										<UniformGrid Columns="{x:Static local:ColorPicker.ColorsInRow}"/>
									</ItemsPanelTemplate>
								</Setter.Value>
							</Setter>
							<!-- Use container style to suppress list box showing selected item on blue background -->
							<Setter Property="ItemContainerStyle">
								<Setter.Value>
									<Style TargetType="ListBoxItem">
										<Style.Resources>
											<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
											<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
										</Style.Resources>
									</Style>
								</Setter.Value>
							</Setter>
						</Style>
					</ControlTemplate.Resources>

					<Grid>
						<!-- Main button of the picker -->
						<ToggleButton x:Name="ColorPickerOpenButton" MinWidth="24" Margin="0" Padding="0"
							IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsOpen, Mode=TwoWay}"
						>
							<ToggleButton.Template>
								<ControlTemplate TargetType="ToggleButton">
									<Grid Background="Transparent">
										<ContentPresenter/>

										<Border BorderThickness="1" BorderBrush="{x:Static SystemColors.HighlightBrush}">
											<Border.Style>
												<Style TargetType="Border">
													<Setter Property="Visibility" Value="Hidden"/>
													<Style.Triggers>
														<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMouseOver}" Value="True">
															<Setter Property="Visibility" Value="Visible"/>
														</DataTrigger>
														<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}" Value="True">
															<Setter Property="Visibility" Value="Visible"/>
														</DataTrigger>
													</Style.Triggers>
												</Style>
											</Border.Style>
											<Rectangle Opacity="0.3" Fill="{x:Static SystemColors.HighlightBrush}"/>
										</Border>
									</Grid>
								</ControlTemplate>
							</ToggleButton.Template>
							<ToggleButton.Content>
								<Grid Margin="2">
									<Grid.ColumnDefinitions>
										<ColumnDefinition Width="Auto"/>
										<ColumnDefinition Width="Auto"/>
									</Grid.ColumnDefinitions>
									<Grid.RowDefinitions>
										<RowDefinition Height="Auto"/>
										<RowDefinition Height="*"/>
									</Grid.RowDefinitions>

									<Image Grid.Column="0" Grid.Row="0" VerticalAlignment="Center">
										<Image.Style>
											<Style TargetType="Image">
												<Style.Triggers>
													<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorPickerMode}" Value="{x:Static local:ColorPickerMode.Color}">
														<Setter Property="Source" Value="..\Properties\Color.png"/>
													</DataTrigger>
													<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorPickerMode}" Value="{x:Static local:ColorPickerMode.Foreground}">
														<Setter Property="Source" Value="..\Properties\FontColor.png"/>
													</DataTrigger>
													<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorPickerMode}" Value="{x:Static local:ColorPickerMode.Background}">
														<Setter Property="Source" Value="..\Properties\Highlight.png"/>
													</DataTrigger>
												</Style.Triggers>
											</Style>
										</Image.Style>
									</Image>
									<Rectangle Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Height="5" Margin="3,0">
										<Rectangle.Fill>
											<SolidColorBrush Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedColor}"/>
										</Rectangle.Fill>
									</Rectangle>
									<Polygon Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Fill="Black" VerticalAlignment="Center" Points="0,0 7,0 3,4"/>
								</Grid>
							</ToggleButton.Content>
						</ToggleButton>

						<Popup PlacementTarget="{Binding ElementName=ColorPickerOpenButton}" Placement="Bottom"
							IsOpen="{Binding ElementName=ColorPickerOpenButton, Path=IsChecked}"
							StaysOpen="False"
							AllowsTransparency="True"
							Focusable="False"
							PopupAnimation="Slide"
						>
							<TabControl TabStripPlacement="Bottom">
								<TabItem Header="{x:Static properties:Resources.ColorPickerTabStandard}">
									<Grid x:Name="standartColorSelector">
										<StackPanel Orientation="Vertical">
											<StackPanel Orientation="Vertical">
												<StackPanel.Style>
													<Style TargetType="StackPanel">
														<Style.Triggers>
															<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=RecentColors.Count}" Value="0">
																<Setter Property="Visibility" Value="Collapsed"/>
															</DataTrigger>
														</Style.Triggers>
													</Style>
												</StackPanel.Style>

												<TextBlock Text="{x:Static properties:Resources.ColorPickerCaptionRecent}"/>
												<ListBox Style="{StaticResource ColorList}"
													ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=RecentColors}"
												/>

												<Separator HorizontalAlignment="Stretch" Margin="3"/>
											</StackPanel>

											<TextBlock Text="{x:Static properties:Resources.ColorPickerCaptionStandard}"/>
											<ListBox Style="{StaticResource ColorList}"
												ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=StandardColors}"
											/>

											<Separator HorizontalAlignment="Stretch" Margin="3"/>

											<TextBlock Text="{x:Static properties:Resources.ColorPickerCaptionAvailable}"/>
											<ListBox Style="{StaticResource ColorList}"
												ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=AvailableColors}"
											/>
										</StackPanel>
									</Grid>
								</TabItem>
								<TabItem Header="{x:Static properties:Resources.ColorPickerTabCustom}">
									<Grid Height="{Binding ElementName=standartColorSelector, Path=ActualHeight}" Width="{Binding ElementName=standartColorSelector, Path=ActualWidth}">
										<Grid.Resources>
											<!-- Repeat button on sliders is transparent and not focusable -->
											<Style TargetType="RepeatButton">
												<Setter Property="IsTabStop" Value="False"/>
												<Setter Property="Focusable" Value="False"/>
												<Setter Property="Template">
													<Setter.Value>
														<ControlTemplate TargetType="RepeatButton">
															<Border Background="Transparent"/>
														</ControlTemplate>
													</Setter.Value>
												</Setter>
											</Style>

											<Style TargetType="local:SpectrumSlider">
												<Setter Property="Orientation" Value="Vertical"/>
												<Setter Property="Minimum" Value="0"/>
												<Setter Property="Maximum" Value="360"/>
												<Setter Property="IsMoveToPointEnabled" Value="True"/>
												<Setter Property="SmallChange" Value="1"/>
												<Setter Property="LargeChange" Value="36"/>
												<Setter Property="IsDirectionReversed" Value="True"/>
												<Setter Property="Template">
													<Setter.Value>
														<ControlTemplate TargetType="local:SpectrumSlider">
															<Border Background="{TemplateBinding Background}" Width="16" BorderThickness="1" BorderBrush="{x:Static SystemColors.ActiveBorderBrush}">
																<Track Margin="0,-5" Name="PART_Track">
																	<Track.DecreaseRepeatButton>
																		<RepeatButton Command="Slider.DecreaseLarge"/>
																	</Track.DecreaseRepeatButton>
																	<Track.IncreaseRepeatButton>
																		<RepeatButton Command="Slider.IncreaseLarge"/>
																	</Track.IncreaseRepeatButton>
																	<Track.Thumb>
																		<Thumb>
																			<Thumb.Style>
																				<Style TargetType="Thumb">
																					<Setter Property="Template">
																						<Setter.Value>
																							<ControlTemplate TargetType="Thumb">
																								<Grid Background="Transparent" Width="15" Height="9">
																									<Grid.ColumnDefinitions>
																										<ColumnDefinition Width="6"/>
																										<ColumnDefinition Width="4"/>
																										<ColumnDefinition Width="6"/>
																									</Grid.ColumnDefinitions>
																									<Polygon Grid.Column="0" Stroke="White" StrokeThickness="1" Fill="Black" Points="0,0 5,5 0,9"/>
																									<Polygon Grid.Column="2" Stroke="White" StrokeThickness="1" Fill="Black" Points="5,0 0,5 5,9"/>
																								</Grid>
																							</ControlTemplate>
																						</Setter.Value>
																					</Setter>
																				</Style>
																			</Thumb.Style>
																		</Thumb>
																	</Track.Thumb>
																</Track>
															</Border>
														</ControlTemplate>
													</Setter.Value>
												</Setter>
											</Style>

											<Style TargetType="local:ColorSlider">
												<Setter Property="Orientation" Value="Horizontal"/>
												<Setter Property="Minimum" Value="0"/>
												<Setter Property="Maximum" Value="255"/>
												<Setter Property="IsMoveToPointEnabled" Value="True"/>
												<Setter Property="SmallChange" Value="1"/>
												<Setter Property="LargeChange" Value="15"/>
												<Setter Property="Template">
													<Setter.Value>
														<ControlTemplate TargetType="local:ColorSlider">
															<Border Height="12" BorderThickness="1" BorderBrush="{x:Static SystemColors.ActiveBorderBrush}">
																<Border.Background>
																	<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
																		<GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=LeftColor}" Offset="0"/>
																		<GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=RightColor}" Offset="1"/>
																	</LinearGradientBrush>
																</Border.Background>

																<Track x:Name="PART_Track" ClipToBounds="False" VerticalAlignment="Center" Height="10">
																	<Track.DecreaseRepeatButton>
																		<RepeatButton Command="Slider.DecreaseLarge"/>
																	</Track.DecreaseRepeatButton>
																	<Track.IncreaseRepeatButton>
																		<RepeatButton Command="Slider.IncreaseLarge"/>
																	</Track.IncreaseRepeatButton>
																	<Track.Thumb>
																		<Thumb Margin="-3">
																			<Thumb.Style>
																				<Style TargetType="Thumb">
																					<Setter Property="Template">
																						<Setter.Value>
																							<ControlTemplate TargetType="Thumb">
																								<Grid Width="9" Height="12" Background="Transparent">
																									<Grid.RowDefinitions>
																										<RowDefinition Height="*"/>
																										<RowDefinition Height="*"/>
																										<RowDefinition Height="*"/>
																									</Grid.RowDefinitions>
																									<Polygon Grid.Row="0" Stroke="White" StrokeThickness="1" Fill="Black" Points="0,0 9,0 5,4"/>
																									<Polygon Grid.Row="2" Stroke="White" StrokeThickness="1" Fill="Black" Points="5,0 9,4 0,4"/>
																								</Grid>
																							</ControlTemplate>
																						</Setter.Value>
																					</Setter>
																				</Style>
																			</Thumb.Style>
																		</Thumb>
																	</Track.Thumb>
																</Track>
															</Border>
														</ControlTemplate>
													</Setter.Value>
												</Setter>
											</Style>

											<local:HueToColorConverter x:Key="HueToColorConverter"/>
										</Grid.Resources>

										<Grid.RowDefinitions>
											<RowDefinition Height="Auto"/>
											<RowDefinition Height="Auto"/>
											<RowDefinition Height="Auto"/>
											<RowDefinition Height="Auto"/>
											<RowDefinition Height="Auto"/>
											<RowDefinition Height="Auto"/>
										</Grid.RowDefinitions>
										<Grid.ColumnDefinitions>
											<ColumnDefinition Width="Auto"/>
											<ColumnDefinition Width="*"/>
											<ColumnDefinition Width="Auto"/>
											<ColumnDefinition Width="Auto"/>
										</Grid.ColumnDefinitions>

										<!-- SaturationPicker -->
										<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Height="150" Margin="3" BorderThickness="1" BorderBrush="{x:Static SystemColors.ActiveBorderBrush}">
											<Border.Background>
												<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
													<GradientStop Offset="0" Color="#FFFFFFFF"/>
													<GradientStop Offset="1" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Hue, Converter={StaticResource HueToColorConverter}}"/>
												</LinearGradientBrush>
											</Border.Background>

											<local:SaturationPicker ClipToBounds="True"
												Saturation="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Saturation, Mode=TwoWay, NotifyOnSourceUpdated=True}"
												Lightness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Lightness, Mode=TwoWay, NotifyOnSourceUpdated=True}"
											>
												<local:SaturationPicker.Background>
													<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
														<GradientStop Offset="0" Color="#00000000"/>
														<GradientStop Offset="1" Color="#FF000000"/>
													</LinearGradientBrush>
												</local:SaturationPicker.Background>
												<local:ColorThumb
													Canvas.Left="{Binding RelativeSource={RelativeSource Self}, Path=X, Mode=OneWay}"
													Canvas.Top="{Binding RelativeSource={RelativeSource Self}, Path=Y, Mode=OneWay}"
													Saturation="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Saturation, Mode=OneWay}"
													Lightness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Lightness, Mode=OneWay}"
												>
													<local:ColorThumb.Style>
														<Style TargetType="local:ColorThumb">
															<Setter Property="Template">
																<Setter.Value>
																	<ControlTemplate TargetType="local:ColorThumb">
																		<Grid Width="12" Height="12">
																			<Ellipse Stroke="White" Margin="0"/>
																			<Ellipse Stroke="Black" Margin="1"/>
																			<Ellipse Stroke="White" Margin="2"/>
																			<Line Stroke="#80000000" X1="0" Y1="6" X2="12" Y2="6"/>
																			<Line Stroke="#80000000" X1="6" Y1="0" X2="6" Y2="12"/>
																		</Grid>
																	</ControlTemplate>
																</Setter.Value>
															</Setter>
														</Style>
													</local:ColorThumb.Style>
													<local:ColorThumb.RenderTransform>
														<TranslateTransform X="-5" Y="-5"/>
													</local:ColorThumb.RenderTransform>
												</local:ColorThumb>
											</local:SaturationPicker>
										</Border>

										<local:SpectrumSlider Grid.Row="0" Grid.Column="3" Grid.RowSpan="5" Margin="3"
											Hue="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Hue, Mode=TwoWay}"
										/>

										<TextBlock Grid.Row="1" Grid.Column="0" Text="R" Margin="3"/>
										<local:ColorSlider Grid.Row="1" Grid.Column="1" Margin="3" Minimum="0" Maximum="255"
											LeftColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=RedSliderLeftColor}"
											RightColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=RedSliderRightColor}"
											Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=R, Mode=TwoWay}"
										/>
										<TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=R}" Margin="3" MinWidth="30"/>

										<TextBlock Grid.Row="2" Grid.Column="0" Text="G" Margin="3"/>
										<local:ColorSlider Grid.Row="2" Grid.Column="1" Margin="3" Minimum="0" Maximum="255"
											LeftColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=GreenSliderLeftColor}"
											RightColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=GreenSliderRightColor}"
											Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=G, Mode=TwoWay}"
										/>
										<TextBlock Grid.Row="2" Grid.Column="2" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=G}" Margin="3" MinWidth="30"/>

										<TextBlock Grid.Row="3" Grid.Column="0" Text="B" Margin="3"/>
										<local:ColorSlider Grid.Row="3" Grid.Column="1" Margin="3" Minimum="0" Maximum="255"
											LeftColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BlueSliderLeftColor}"
											RightColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BlueSliderRightColor}"
											Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=B, Mode=TwoWay}"
										/>
										<TextBlock Grid.Row="3" Grid.Column="2" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=B}" Margin="3" MinWidth="30"/>

										<TextBlock Grid.Row="4" Grid.Column="0" Text="A" Margin="3"/>
										<Rectangle Grid.Row="4" Grid.Column="1" Fill="{StaticResource TransparentBrush}" VerticalAlignment="Center" Height="10" Margin="3"/>
										<local:ColorSlider Grid.Row="4" Grid.Column="1" Margin="3" Minimum="0" Maximum="255"
											LeftColor="#00000000"
											RightColor="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=AlphaSliderRightColor}"
											Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=A, Mode=TwoWay}"
										/>
										<TextBlock Grid.Row="4" Grid.Column="2" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=A}" Margin="3" MinWidth="30"/>

										<Grid Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="4" HorizontalAlignment="Stretch">
											<Grid.ColumnDefinitions>
												<ColumnDefinition Width="Auto"/>
												<ColumnDefinition Width="*"/>
												<ColumnDefinition Width="Auto"/>
											</Grid.ColumnDefinitions>
											
											<TextBlock Grid.Column="0" Text="#DDDDDDDD" Margin="3,3,1,3" VerticalAlignment="Center" Visibility="Hidden"/> <!-- Widest string will determine width of the column -->
											<TextBlock Grid.Column="0" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CustomColor}" Margin="3,3,1,3" VerticalAlignment="Center"/>
											<Rectangle Grid.Column="1" Margin="1,5,4,5" Fill="{StaticResource TransparentBrush}"/>
											<Rectangle Grid.Column="1" Margin="1,5,3,5">
												<Rectangle.Fill>
													<SolidColorBrush Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=CustomColor}"/>
												</Rectangle.Fill>
											</Rectangle>
											<Button Grid.Column="2" HorizontalAlignment="Right" Margin="3" MinWidth="24"
												Content="{x:Static properties:Resources.ColorPickerCaptionSelectCustom}"
												Command="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectColorCommand, Mode=OneTime}"
											/>
										</Grid>
									</Grid>
								</TabItem>
							</TabControl>
						</Popup>
					</Grid>

					<!--<ControlTemplate.Triggers>
						<Trigger Property="IsKeyboardFocusWithin" Value="False">
							<Setter TargetName="ColorPickerOpenButton" Property="IsChecked" Value="False"/>
						</Trigger>
					</ControlTemplate.Triggers>-->
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</ResourceDictionary>
